<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <base href="<?php echo (C("BASE")); ?>">
    <link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">  
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="ui/jquery.min.js"></script>     
    <script type="text/javascript" src="ui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js"></script> 
    <script src="layer/layer.js"></script>   
    <title>后台管理</title>     
</head>
<body>

<!-- 新增产品 -->

<!-- <form method="post" enctype="multipart/form-data">

<div><label>类别</label>
	<select class="easyui-combobox" name="pid" style="width:150px;">
		
			<?php if(is_array($category)): foreach($category as $key=>$v): ?><option value="<?php echo ($v["id"]); ?>"><?php echo ($v["title"]); ?></option><?php endforeach; endif; ?>
	</select>
</div>

<div>
	<label>产品名称</label>
	<input type="text" name="title" style="width:150px;" class="easyui-textbox"/>
</div>
<div><label>产品类别</label>
	<select class="easyui-combobox" name="pid" style="width:150px;">
		
			<?php if(is_array($seo)): foreach($seo as $key=>$v): ?><option value="<?php echo ($v["id"]); ?>"><?php echo ($v["name"]); ?></option><?php endforeach; endif; ?>
	</select>
</div>

<div>
	<label>产品详情</label>
	
	<script id="container" name="content" type="text/plain" style="width:800px;height:300px;margin-left:120px;"></script>
</div>

<div>
	<label>图片</label>
	<input type="file" name="images[]" multiple="multiple"/>
</div>
<div class="uploadimg">
<ul></ul>		
</div>
<p class="err"><?php echo ($errstr); ?></p>
<input type="submit" value="提交" class="easyui-linkbutton" data-options="width:'70'"/>
</form>
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
编辑器源码文件
<script type="text/javascript" src="ueditor/ueditor.all.js"></script>
<script type="text/javascript">
	var ue = UE.getEditor('container');
	var errstr="<?=$errstr ?>";
	if(errstr.length>0){
		alert(errstr);
	}
$("input[type='file']").change(function(){  //当文件框值发生改变时引发事件
	$(".uploadimg ul li").remove();		//清除之前添加的li标签
	if(window.FileReader){		//判断游览器是否支持FileReader
		j=0;
		for(var i=0;i<this.files.length;i++){	//循环文件数组
			var fr=new FileReader;			//实例化FileReader
			fr.readAsDataURL(this.files[i]);	//读取文件，返加base64格式的文件内容
			fr.onloadend=function(e){		//当文件读取完成触发事件
				var li="<li><img src='"+e.target.result+"' style='width:100px' /><a href='javascript:;' class='delimg' >删除</a><input type='hidden' name='check[]' value='"+j+"' /></li>";
				
				$(".uploadimg ul").append(li);
				j++;
			}
		}
	}else{
		alert('您的游览器不支持图片预览');
	}
});
$(".uploadimg ul").on("click","li a",function(){
	$(this).parent().remove();
})
</script> -->
<title>产品新增</title>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>

<style>
    .store{
         border:1px #95B8E7 solid;
        width:700px;

    }
    #ff .base>div,.attr_add_html div,.buy_attr div{
        margin:8px;
    }
    .store div,.require_attr div{

         margin:4px;
    }
    .store .color,.store .taocan,.store .kucun{
        width:400px;
    }
    .del_store{
        color:green;
        cursor:pointer;
    }
    #ff input{
        border:1px solid #95B8E7;
    }
    .images_list{
        height:104px;
        margin-left:100px;
    }
    .images_list li{
         float:left;
         width:104px;
        height:104px;
         padding:4px;
        border:1px solid #95B8E7;
        margin-left:10px;
    }
    .images_list li img{
        width:100px;
        height:100px;
    }
</style>
<form id="ff" method="post">
<div id="tt" class="easyui-tabs" style="width:100%;">
    <div class="base" title="产品基本信息" style="padding:20px;display:none;">

            <div>
                <label for="is_online"> 是否上线:</label>

                <input  class="easyui-switchbutton" name="is_online" data-options="onText:'on',offText:'off'">
            </div>
            <div>
                <label for="name">产品名称:</label>
                <input class="easyui-validatebox" type="text" name="name" data-options="required:true" style="width:600px" />
            </div>
            <div>
                <label for="goods_ad">产品广告语:</label>
                <input class="easyui-validatebox" type="text" name="goods_ad"   style="width:600px" />
            </div>

            <div>
                <label for="market_price">商品价:</label>
                <input class="easyui-validatebox" type="text" name="market_price"  />&#65509
            </div>
           
            <div>
                <label for="sort">排序:</label>
                <input class="easyui-validatebox" type="text" name="sort" value="0"  />
                *数字,值越大越往前面排
            </div>
            <!--<div>
                <label for="img">宣传图片:</label>
                <input class="easyui-validatebox" type="file" name="img" value="0"  />
                <img src="" alt/>
            </div>-->
            <div>
                <label for="content">产品详情:</label>
                <script id="editor" type="text/plain" name="content" style="width:824px;height:500px;margin-left:120px">

                </script></div>


    </div>
    <div title="产品属性" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
            <div style="margin:8px">
                <label for="cid">产品分类:</label>
            <select id="cc" class="easyui-combobox" name="pid" style="width:200px;">
                <?php if(is_array($category)): foreach($category as $key=>$v): ?><option value="<?php echo ($v["id"]); ?>"><?php echo ($v["title"]); ?></option><?php endforeach; endif; ?>
            </select>

            </div>

         <h1 style="font-size:14px;">必填属性:</h1>
         <div class="require_attr">
           <div>

           </div>
         </div>

        <h1 style="font-size:14px;">购买属性: (颜色和图片顺序注意保持一致)</h1>
          <div class="buy_attr">
                 <div> <!--添加购买属性的字段-->

                 </div>
                <div>
                 <label >图片:</label>
                 <input type="file" name="images[]" value="0"  style="width:200px"  multiple="multiple"/>
                </div>
                 <ul class="images_list">
                     <li><img src="/thinkphp/Application/Home/View/Public/images/pay_success-left.png"/></li>
                    <li><img src="/thinkphp/Application/Home/View/Public/images/pay_success-left.png"/></li>
                    <li><img src="/thinkphp/Application/Home/View/Public/images/pay_success-left.png"/></li>
                 </ul>
         </div>


         <h1 style="font-size:14px;margin-top:30px">额外属性
             <a href="javascript:;" class="easyui-linkbutton add_attr" style="margin-left:20px"  data-options="iconCls:'icon-add'">Add</a>
         </h1>
        <div style="margin-left:120px" class="attr_add_html">
               <div style="overflow:hidden">
                   <span style="width:200px; text-align:center;float:left">属性名称</span>
                   <span style="width:400px;text-align:center;float:left">属性值</span>
               </div>

               <div style="overflow:hidden">
                   <input style="width:200px;" type="text" name="extra_attr_name" />
                   <input style="width:400px;" type="text" name="extra_attr_value" />
                   <a href="javascript:;" style="margin-left:10px" class="del_attr" >删除</a>
               </div>
        </div>
    </div>


     </div>


 <div class="submit" style="width:100px;height:28px; line-height:28px; margin-left:20px;
            position:fixed; bottom:0;background-color:#BFEFFF;text-align:center;z-index:9998">提交</div>
</form>
<script>
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');
    $(".submit").click(function(){
        $("#ff").submit();
    })
    $('#tt').tabs({
        border:false,

    });

   $(".add_attr").click(function(){
        var str=' <div style="overflow:hidden">' +
            '                   <input style="width:200px;" type="text" name="attr_name[]" />' +
            '                   <input style="width:400px;" type="text" name="attr_name[]" />' +
            '                   <a href="javascript:;" style="margin-left:10px" class="del_attr" >删除</a>' +
            '               </div>';
       $(".attr_add_html").append(str);

       })

  $(document).on("click",".del_attr,.del_store",function(){
      $(this).parent().remove();
  })


    $('#cc').combobox({
        onChange:function(){
            changeattr();
       }

    });

    $(".buy_attr input[type='file']").change(function(){
                $(".images_list").html(""); //当重新选择图片的时候，则将以前选择的内容进行清空
                console.log(this.files.length);

//循环监听上传的每张图片
                for(var i=0;i<this.files.length;i++){
                    var file = this.files[i];
                    if (window.FileReader) {
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        //监听文件读取结束后事件
                        reader.onloadend = function (e) {
                            var str = "<li>";
                            str+= "<img src='"+e.target.result+"'/>";

                            str+="</li>";
                            $(".images_list").append(str);

                        };

                    }

                }
            })


    function changeattr(){
        var category= $("#cc").val();
        console.log(category);
        $.ajax({
             type:"post",
             url:"<?php echo U('product/getattr');?>",
             dataType:"json",
             data:"id="+category,
             success:function(msg){
                 var str="";
                 var buy_str="";
                 for(var i=0;i<msg.requre_attr.length;i++){
                 str+='<div>\n' +
                      '            <label>'+msg["requre_attr"][i].attr_name+':</label>\n' +

                      '            <input class="easyui-validatebox" type="text" name="require_attr_value[]"  style="width:600px" />\n' +
                      '            <input class="easyui-validatebox" type="hidden" name="require_attr_id[]" value="'+msg["requre_attr"][i].id+'"   style="width:600px" />\n' +
                      '        </div>';

                 }
                 for(var i=0;i<msg.buy_attr.length;i++){
                     buy_str+='<div>' +
                     '            <label>'+msg["buy_attr"][i].attr_name+':</label>' +
                     '            <input class="easyui-validatebox" type="text" name="buy_attr_value[]"  style="width:600px" />多个值之间用|隔开' +
                     '            <input class="easyui-validatebox" type="hidden" name="buy_attr_id[]" value="'+msg["buy_attr"][i].id+'"   style="width:600px" />' +

                     '        </div>';

                  }
                 console.log(22);
                 console.log(buy_str);
                 $(".buy_attr div").eq(0).html(buy_str);
                   $(".require_attr").html(str);
                 }

        })
    }
   changeattr();


</script>

</body>
</html>